<template>
  <div class="person-box">
    <div @click="$router.push('/recommend')">
      <span class="iconfont icon-zuojiantou"></span>
    </div>

    <!-- 个人信息 -->
    <div class="person">
      <!-- 头像 -->
      <div class="headpic" @click="showPopup">
        <img :src="picUrl" alt="" />
      </div>
      <div class="person-name">{{ name }}</div>
      <div class="fans">
        <span>{{ followeds }}关注</span>
        <span>{{ follows }}粉丝</span>
        <span>lv.{{ level }}</span>
      </div>
    </div>

    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '10%' }"
    >
      <van-button type="primary" size="large" @click="quit"
        >退出登录</van-button
      >
    </van-popup>

    <!-- 功能盒子 -->
    <div class="function-box">
      <router-link tag="div" to="/userinfo/recentlyplay" class="item">
        <span class="iconfont icon-zuijinbofang"></span>
        <p>最近播放</p>
      </router-link >
      <div class="item">
        <span class="iconfont icon-xitongxiazaibendi"></span>
        <p>本地/下载</p>
      </div>
      <div class="item">
        <span class="iconfont icon-yunpan"></span>
        <p>云盘</p>
      </div>
      <div class="item">
        <span class="iconfont icon-yigou"></span>
        <p>已购</p>
      </div>
      <router-link tag="div" to="/userinfo/myfriend" class="item">
        <span class="iconfont icon-wodehaoyou"></span>
        <p>我的好友</p>
      </router-link>
      <div class="item">
        <span class="iconfont icon-shoucang"></span>
        <p>收藏和赞</p>
      </div>
      <div class="item">
        <span class="iconfont icon-boke"></span>
        <p>我的播客</p>
      </div>
      <div class="item">
        <span class="iconfont icon-shezhi"></span>
        <p>设置</p>
      </div>
    </div>

    <!-- 我喜欢的音乐 -->
    <router-link
      tag="div"
      class="likemusic"
      :to="'/rank/ranklist?id=' + songlistId"
    >
      <div class="content">
        <div class="img">
          <img :src="imgUrl" alt="" />
        </div>
        <div class="text">
          <div>我喜欢的音乐</div>
          <span>{{ songLength }}首</span>
        </div>
        <div class="heart">
          <span class="iconfont icon-aixin"></span><span>心动模式</span>
        </div>
      </div>
    </router-link>

    <!-- 收藏歌单 -->
    <div class="collent-playlist">
      <div class="mount">
        收藏歌单<span class="number">({{ playlistCount }})个</span>
      </div>
  
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <router-link tag="div" :to="'/rank/ranklist?id=' + item.id" class="item" v-for="item in playList.slice(createdPlaylistCount).slice(0,playlistLength)"
           :key="item.id">
            <!-- 图片 -->
            <div class="pic">
              <van-image lazy-load :src="item.coverImgUrl" alt="" />
            </div>

            <div class="content">
              <div class="top">
                <span>{{ item.name }}</span>
              </div>
              <div class="bottom">
                <span>{{ item.trackCount }}首</span> <span>by</span>
                <span class="autor">{{ item.creator.nickname }}</span>
              </div>
            </div>
          </router-link>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getLogout } from "../api/login";
import { Toast } from "vant";
import {
  getUserDetail,
  getUserPlayList,
  getPlaylistDetail,
  getSubCount,
} from "../api/person";
export default {
  data() {
    return {
      show: false,
      userId: null,
      name: null,
      picUrl: null, //头像
      level: null,
      followeds: null, //粉丝数
      follows: null, //关注数
      imgUrl: null, //我的歌单图片
      songlistId: null, //歌单id
      songLength: null,
      playList: [], //收藏歌单
      playlistCount: null, //用户歌单收藏数量
      createdPlaylistCount: null, //用户创建的歌单
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      L:1,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },

    // 退出功能
    quit() {
      getLogout()
        .then(() => {
          window.localStorage.clear();
          this.$router.push("/login");

          Toast("退出成功");
        })
        .catch(() => {
          Toast("退出失败");
        });
    },

    onLoad() {
      let that = this;
      setTimeout(() => {
     

        that.L +=1
        that.loading = false;

        if (that. playlistCount <= that.L*10) {
          that.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
  computed:{
    playlistLength(){
      return this.L * 10
    }
  },
  created() {
    this.userId = window.localStorage.getItem("uid");
    getUserDetail({ uid: this.userId }).then((data) => {
      
      this.name = data.profile.nickname;
      this.picUrl = data.profile.avatarUrl;
      this.level = data.level;
      this.followeds = data.profile.followeds;
      this.follows = data.profile.follows;
      
    });

    // 获取用户歌单接口
    getUserPlayList({ uid: this.userId }).then((data) => {
      
      this.playList = data.playlist;
      this.imgUrl = data.playlist[0].coverImgUrl;
      this.songMount = data.playlist.length;
      this.songlistId = data.playlist[0].id;
      

      // 歌单能看到歌单名字, 但看不到具体歌单内容 , 调用此接口 , 传入歌单 id, 可 以获取对应歌单内的所有的音乐
      getPlaylistDetail({ id: this.songlistId }).then((data) => {
        
        this.songLength = data.privileges.length;
      });

      // 获取用户信息 , 歌单，收藏，mv, dj 数量
      getSubCount().then((data) => {
        this.playlistCount = data.subPlaylistCount;
        this.createdPlaylistCount = data.createdPlaylistCount
      });
    });
  },
};
</script>

<style lang="less">
.person-box {
  width: 100%;
  position: relative;
  min-height: 750px;
  padding-top: 50px;
  background-color: #eaeaea;
  .icon-zuojiantou {
    position: absolute;
    top: 1%;
    left: 2%;
    font-size: 16px;
  }
  .person {
    width: 90%;
    height: 104px;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 auto;
    padding-top: 40px;
    box-sizing: border-box;
    position: relative;
    .headpic {
      position: absolute;
      top: -33px;
      left: calc(50% - 33px);
      width: 66px;
      height: 66px;
      border-radius: 50%;
      img {
        width: 66px;
        height: 66px;
        border-radius: 50%;
      }
      //   background-color: red;
    }
    .person-name {
      text-align: center;
    }
    .fans {
      margin: 0 auto;
      margin-top: 5px;
      text-align: center;
      width: 60%;
      height: 20px;
      span {
        margin-right: 13px;
        font-size: 15px;
      }
    }
  }

  .function-box {
    width: 90%;
    height: 175px;
    border-radius: 10px;
    display: flex;
    background-color: #fff;
    flex-wrap: wrap;
    align-content: space-around;
    margin: 0 auto;
    margin-top: 20px;
    .item {
      text-align: center;
      width: 25%;
      height: 54px;

      .iconfont {
        font-size: 26px;
      }
      p {
        font-size: 14px;
        margin: 0;
        margin-top: 5px;
      }
    }
  }

  .likemusic {
    width: 90%;
    height: 80px;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 15px;
    padding: 0 15px;
    box-sizing: border-box;
    margin-bottom: 15px;
    .content {
      display: flex;
      // justify-content: space-around;
      align-items: center;
      padding-top: 15px;
      .img {
        width: 50px;
        height: 50px;
        // background-color: chocolate;
        img {
          width: 50px;
          height: 50px;
        }
      }
      .text {
        flex: 1;
        margin-left: 10px;
        span {
          font-size: 14px;
        }
      }
      .heart {
        padding: 8px;
        border-radius: 20px;
        border: 1px solid #eaeaea;
        font-size: 14px;
        line-height: 14px;

        .icon-aixin {
          font-size: 16px;
          margin-right: 5px;
          color: red;
        }
      }
    }
  }

  .collent-playlist {
    width: 90%;
    
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 10px;
    .mount {
      font-size: 12px;
      color: #8c8c8c;
      margin-bottom: 5px;
      letter-spacing: 2px;
      .number {
        letter-spacing: 0;
      }
    }
    .item {
      display: flex;
      .pic {
        width: 50px;
        height: 50px;
        background-color: red;
        margin-right: 10px;
        margin-bottom: 5px;
        border-radius: 5px;
        img {
          width: 50px;
          height: 50px;
        }
      }
      .content {
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        .top {
          color: #000;
          font-weight: bold;
          font-size: 15px;
          margin-bottom: 4px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .bottom {
          font-size: 12px;
          color: #8c8c8c;
        }
      }
    }
  }
}
</style>